import {AfterViewInit, Component, ElementRef, Host, HostBinding, Input, Optional, Renderer2} from '@angular/core';
import { GridRowComponent } from './row.component';

@Component({
  selector: 'ns-col',
  template: `
    <ng-content></ng-content>
  `,
  styleUrls: ['./grid.component.scss'],
})
export class GridColComponent implements AfterViewInit {
  @Input() nsSpan: number;

  @HostBinding('class')
  get setClass(): string[] {
    return [`sigma-col-${this.nsSpan}`]
  }

  constructor(
    public elementRef: ElementRef,
    public render: Renderer2,
    @Optional() @Host() public nsGridRowComponent:GridRowComponent 
  ) {
    
  }

  ngAfterViewInit(): void {
    if (this.nsGridRowComponent) {
      this.nsGridRowComponent.actualGutter$.subscribe(([horizontalGutter, verticalGutter]) => {
        const renderGutter = (style:string, gutter:number | null): void => {
          const el = this.elementRef.nativeElement;
          if (gutter !== null) {
            this.render.setStyle(el, style, `${gutter / 2}px`);
          }
        }

        renderGutter('padding-left', horizontalGutter);
        renderGutter('padding-right', horizontalGutter);
        renderGutter('padding-top', verticalGutter);
        renderGutter('padding-bottom', verticalGutter);
      })
    }
  }
}
